<template>
	<view>
        <view class="seller-info u-flex u-row-center u-p-15">
            本次售后服务将由<text class="seller-name">{{refund.seller_name}}</text>提供
        </view>
        <view class="log-info">
            <view class="status-info">
                <view class="status-val">{{ refund.service_status_text }}</view>
                <view class="status-tip" v-if="refund.allowable.allow_ship">请您尽快将申请售后的商品退还给卖家</view>
                <view class="status-tip" v-else>{{ refund.service_status | parseServiceStatus }}</view>
            </view>
            <view class="log-box-bottom"></view>
            <navigator :url="'./service-logs?service_sn=' + refund.sn" hover-class="none">
                <view class="log-box-top u-flex u-row-between">
                    <view class="top01">
                        <text class="log-title">操作日志</text>
                        <view class="log-first-show">
                            <text class="log-cont">{{ log.log_detail }}</text>
                        </view>
                    </view>
                    <u-icon name="arrow-right"/>
                </view>
            </navigator>
        </view>
        <view class="goods-view">
            <view v-for="(goods,index) in refund.goods_list">
                <goods-info
                    :goodsPrice="goods.price"
                    :goodsName="goods.goods_name"
                    :goodsImg="goods.goods_image"
                    :goodsSpecList="goods.spec_list"
                    :goodsNum="goods.return_num">
                </goods-info>
            </view>
        </view>
        <view class="u-margin-bottom-20 u-margin-top-20" v-if="refund.gift_list && refund.gift_list.length > 0">
            <view class="order-gift-view" >
                <view class="gift-header">
                    <view class="gift-title">
                        <text>赠品列表</text>
                    </view>
                </view>
                <view class="gift-list-view"  v-for="(gift,giftIndex) in refund.gift_list">
                    <view class="gift-img-view">
                        <u-image border-radius="10" width="120rpx" height="120rpx" :src="gift.gift_img"></u-image>
                    </view>
                    <view class="gift-info-view">
                        <view class="u-line-2">
                             {{gift.gift_name}}
                        </view>
                    </view>
                    <view class="gift-price-view">
                        <custom-price :price="gift.gift_price" :fontWeight="600" size="30" ></custom-price>
                    </view>
                </view>
            </view>
        </view>
        <view class="block-view" v-if="refund.allowable.allow_ship">
            <view class="express-title">填写物流信息</view>
            <u-field v-model="form.courier_company_str" input-align="right" disabled label="快递公司" placeholder="请选择快递公司" placeholder-style="color: #CDCDCD" right-icon="arrow-right"  maxlength="20" @click="expressShow = true" ></u-field>
            <u-field v-model="form.courier_number" input-align="right" label="快递单号" placeholder="请输入快递单号" placeholder-style="color: #CDCDCD"  maxlength="20"></u-field>
            <date-picker :endDate="endDate" @onConfirm="timeConfirm">
                <u-field v-model="form.ship_time" input-align="right" disabled label="发货时间" placeholder-style="color: #CDCDCD"  maxlength="20"></u-field>
            </date-picker>
            <view>
                <u-button type="error" @click="submit">提交</u-button>
            </view>
        </view>
        <view v-model="refund" class="block-view">
            <view class="block-item-view">
                <view class="title">服务单号：</view>
                <view class="value">{{refund.sn}}</view>
            </view>
            <view class="block-item-view">
                <view class="title">订单编号：</view>
                <view class="value">{{refund.order_sn}}</view>
            </view>
            <view class="block-item-view" v-if="refund.new_order_sn">
                <view class="title">新订单编号：</view>
                <view class="value">{{refund.new_order_sn}}</view>
            </view>
            <view class="block-item-view">
                <view class="title">服务类型：</view>
                <view class="value">{{refund.service_type_text}}</view>
            </view>
            <view class="block-item-view">
                <view class="title">申请原因：</view>
                <view class="value u-line-5">{{refund.reason}}</view>
            </view>
            <view class="block-item-view" v-if="refund.apply_vouchers">
                <view class="title">申请凭证：</view>
                <view class="value">{{refund.apply_vouchers}}</view>
            </view>
            <view class="block-item-view" v-if="refund.problem_desc">
                <view class="title">问题描述：</view>
                <view class="value u-line-5">{{refund.problem_desc}}</view>
            </view>
            <view class="block-item-view">
                <view class="u-flex u-flex-wrap">
                    <view class="img-item" v-for="(img,index) in refund.images" :key="index" @click="imgClick(index)" >
                        <u-image width="100" height="100" :src="img.img"></u-image>
                    </view>
                </view>
            </view>
            <view class="block-item-view">
                <view class="title">收货地址：</view>
                <view class="value u-line-5">{{ `${change_info.province || '' } ${change_info.city || ''} ${change_info.county || ''} ${change_info.town || ''} ${change_info.ship_addr || ''} `}}</view>
            </view>
            <view class="block-item-view">
                <view class="title">联系人：</view>
                <view class="value">{{change_info.ship_name}}</view>
            </view>
            <view class="block-item-view">
                <view class="title">联系方式：</view>
                <view class="value u-line-5">{{ change_info.ship_mobile | secrecyMobile }}</view>
            </view>
            <view class="block-item-view" v-if="refund.allowable.allow_show_return_addr">
                <view class="title">退货地址信息：</view>
                <view class="value u-type-error" @click="returnAddrShow = true">点击查看</view>
            </view>
            <view class="block-item-view" v-if="refund.allowable.allow_show_ship_info">
                <view class="title">发货单信息：</view>
                <view class="value u-type-error" @click="shipInfoShow = true">点击查看</view>
            </view>

            <view v-if="refundShow">
                <u-line margin="20rpx 0rpx"></u-line>
                <view class="block-item-view">
                  <text class="title">申请退款金额</text>
                  <text class="value">{{ refund_info.refund_price | unitPrice('￥') }}</text>
                </view>
                <view class="block-item-view" v-if="refund_info.agree_price">
                  <text class="title">同意退款金额：</text>
                  <text class="value">{{ refund_info.agree_price | unitPrice('￥') }}</text>
                </view>
                <view class="block-item-view" v-if="refund_info.actual_price">
                  <text class="title">实际退款金额：</text>
                  <text class="value" style="color: red;">{{ refund_info.actual_price | unitPrice('￥') }}</text>
                </view>
                <view class="block-item-view" v-if="refund_info.actual_price">
                  <text class="title">退款时间：</text>
                  <text class="value">{{ refund_info.refund_time | unixToDate }}</text>
                </view>
                <view class="block-item-view">
                  <text class="title">退款方式：</text>
                  <text class="value">{{ refund_info.refund_way | refundWayFilter }}</text>
                </view>
                <view class="block-item-view" v-if="accountShow">
                  <text class="title">账户类型：</text>
                  <text class="value">{{ refund_info.account_type | accountTypeFilter }}</text>
                </view>
                <view class="block-item-view" v-if="accountShow && !bankShow && refund_info.account_type !== 'BALANCE'">
                  <text class="title">退款账号：</text>
                  <text class="value">{{ refund_info.return_account }}</text>
                </view>
                <view class="block-item-view" v-if="bankShow">
                  <text class="title">银行名称：</text>
                  <text class="value">{{ refund_info.bank_name }}</text>
                </view>
                <view class="block-item-view" v-if="bankShow">
                  <text class="title">银行账号：</text>
                  <text class="value">{{ refund_info.bank_account_number }}</text>
                </view>
                <view class="block-item-view" v-if="bankShow">
                  <text class="title">银行开户名：</text>
                  <text class="value">{{ refund_info.bank_account_name }}</text>
                </view>
                <view class="block-item-view" v-if="bankShow">
                  <text class="title">银行开户行：</text>
                  <text class="value">{{ refund_info.bank_deposit_name }}</text>
                </view>
                <view class="block-item-view" v-if="refund.audit_remark">
                  <text class="title">商家审核备注：</text>
                  <text class="value">{{ refund.audit_remark }}</text>
                </view>
            </view>
        </view>

        <u-action-sheet :list="expressList" v-model="expressShow" @click="expressClick"></u-action-sheet>

        <u-popup v-model="returnAddrShow" mode="bottom" length="25%" border-radius="20" :safe-area-inset-bottom="true">
            <view class="addr-title">退货地址信息</view>
            <view class="u-m-20">{{ refund.return_addr }}</view>
        </u-popup>
        <u-popup v-model="shipInfoShow" mode="bottom" length="25%" border-radius="20" :safe-area-inset-bottom="true">
            <view class="addr-title">发货单信息</view>
            <view class="u-m-20">快递公司：{{ express_info.courier_company }}，运单号:{{ express_info.courier_number }}，发货时间：{{ express_info.ship_time | unixToDate('yyyy-MM-dd') }}</view>
        </u-popup>
	</view>
</template>

<script>
    import * as API_AfterSale from '@/api/after-sale.js'
    import { Foundation } from '@/ui-utils/index.js'

	export default {
		data() {
			return {
                sn: '',
                refund: {
                    allowable: {}
                },
                expressList: [],
                expressShow: false,
                form: {
                    service_sn: '',
                    courier_company_id: 0,         //快递公司
                    courier_number: '',   //快递单号
                    ship_time: '0',          //发货时间
                    courier_company_str : '',
                },
                log: '', //最新一条日志信息
                change_info: '', //收货地址相关信息
                refund_info: '', //退款相关信息
                express_info: '', //发货单信息
                refundShow: false ,//是否展示退款相关信息
                accountShow: false, //是否展示退款账号相关信息
                bankShow: false, //是否展示银行卡相关信息
                returnAddrShow: false, //是否展示退货地址弹出框
                shipInfoShow: false, //是否显示发货单信息
                endDate: ''
			};
		},
        onLoad(options) {
            this.sn = options.sn;
            this.form.service_sn = options.sn;
            this.loadData();
            this.endDate = this.$u.timeFormat(new Date().getTime() + 86400000 * 7, 'yyyy-mm-dd');
            this.form.ship_time = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
        },
        methods: {
            loadData(){
                API_AfterSale.getAfterSaleDetail(this.sn).then(res => {
                    this.refund = res;
                    this.log = this.refund.logs[0]
                    this.change_info = this.refund.change_info
                    this.refund_info = this.refund.refund_info
                    this.express_info = this.refund.express_info || {}
                    this.refundShow = this.refund.service_type === 'RETURN_GOODS' || this.refund.service_type === 'ORDER_CANCEL'
                    this.accountShow = (this.refund.service_type === 'RETURN_GOODS' || this.refund.service_type === 'ORDER_CANCEL') && this.refund_info.refund_way === 'ACCOUNT'
                    this.bankShow = (this.refund.service_type === 'RETURN_GOODS' || this.refund.service_type === 'ORDER_CANCEL') && this.refund_info.refund_way === 'ACCOUNT' && this.refund_info.account_type === 'BANKTRANSFER'
                    const _logiList = this.refund.logi_list;
                    _logiList.forEach(res => {
                        this.expressList.push({
                            text: res.name,
                            id: res.id
                        });
                    })
                })
            },
            timeConfirm(res){
                this.form.ship_time = res.dateValue
            },
            expressClick(index){
                this.form.courier_company_str = this.expressList[index].text;
                this.form.courier_company_id = this.expressList[index].id;
            },
            imgClick(index) {
                const urls = []
                this.refund.images.forEach(item => {
                    urls.push(item.img)
                })
                uni.previewImage({
                    current: index,
                    urls: urls
                })
            },
            submit(){
                const _params = {
                    courier_company_id: this.form.courier_company_id,
                    courier_number: this.form.courier_number,
                    ship_time: Foundation.dateToUnix(this.form.ship_time),
                    service_sn: this.form.service_sn,
                }
                API_AfterSale.saveShip(_params).then(res => {
                    uni.showToast({
                        title: '提交成功'
                    })
                    setTimeout(()=>{
                    	uni.navigateTo({
                    	    url: '/order-module/order/after-sale/after-sale'
                    	})
                    }, 1500)
                })
            }
        }
	}
</script>

<style lang="scss">
    .seller-info {
        background-color: #FFFFFF;
    }
    .log-info {
        margin-bottom: 20rpx;
        .status-info {
            color: #FFFFFF;
            padding: 30rpx 50rpx;
            height: 220rpx;
            background-image: linear-gradient(14deg, #FF614D 0%, #FE7552 100%);
            .status-val {
                font-size: 40rpx;
                font-weight: 600;
                margin-bottom: 20rpx;
            }
        }
        .log-box-bottom {
            height: 150rpx;
        }
        .log-box-top {
            height: 180rpx;
            background-color: #FFFFFF;
            position: absolute;
            top: 246rpx;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 20rpx;
            padding: 50rpx 32rpx;
            border-radius: 20rpx;
            .top01 {
                width: 90%;
                .log-title {
                    display: -webkit-box;
                    margin-right: 10rpx;
                    font-family: PingFangSC-Regular;
                    font-size: 24rpx;
                    line-height: 30rpx;
                    color: rgb(46, 45, 45);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    overflow-wrap: break-word;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    max-height: 60rpx;
                    white-space: normal;
                }

                .log-first-show {
                    flex-direction: row;
                    margin-top: 16rpx;
                    margin-right: 44rpx;
                    .log-cont {
                        display: inline-block;
                        margin-right: 6rpx;
                        font-family: PingFangSC-Regular;
                        font-size: 22rpx;
                        color: rgb(140, 140, 140);
                        line-height: 30rpx;
                    }
                }
            }
        }
    }
    .seller-name {
        color: #f23030;
        font-weight: 600;
    }
    .addr-title {
        font-weight: 600;
        font-size: 36rpx;
        text-align: center;
        padding: 20rpx 0;
    }
    .goods-view {
        background-color: #FFFFFF;
        padding: 15rpx;
        margin: 20rpx;
        border-radius: 20rpx;
    }
    .block-view {
        background-color: #fff;
        padding: 20rpx;
        margin: 20rpx;
        border-radius: 20rpx;
        .header {
            font-weight: 600;
            margin-bottom: 20rpx;
        }
        .block-item-view {
            display: flex;
            flex-direction: row;
            margin: 13rpx 0rpx;
            font-size: 28rpx;
            .title {
               width: 210rpx;
            }
            .value {
                font-weight: 600;
                width: 500rpx;
                word-wrap: break-word;
                word-break: normal;
            }
        }
        .block-item-space-between-view {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 13rpx 0rpx;
            font-size: 25rpx;
            .title {
               width: 200rpx;
            }
            .value {
                font-weight: 600;
            }
        }
        .express-item {
            .express-text {
                margin-left: 10rpx;
                font-size: 25rpx;
            }
        }
        .express-title {
            font-size: 33rpx;
            font-weight: 600;
        }
        .img-item {
            margin-right: 17rpx;
            margin-bottom: 10rpx;
        }
    }
    .order-gift-view {
        padding: 15rpx;
        margin: 20rpx;
        border-radius: 20rpx;
        background: #fff;
        .gift-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 15rpx 20rpx;
            .gift-title {
                font-size: 33rpx;
                font-weight: bold;
            }
        }
        .gift-list-view {
            padding: 0rpx 20rpx;
            padding-bottom: 10rpx;
            display: flex;
            flex-direction: row;
            line-height: 120rpx;
            .gift-img-view {
                position: relative;
            }
        }
        .gift-info-view {
            margin: 0rpx 20rpx;
            flex: 1;
            .gift-coupon-price{
                color: #f42424;
            }
        }
        .gift-price-view {
            text-align: right;
            .goods-price {
                font-weight: bold;
            }
        }
    }
</style>
